<template>
  <div class="digital-twin-container">
    <!-- 顶部导航栏 -->
    <!-- <div class="top-navigation">
      <div class="logo">
        <img src="/images/logo.png" alt="数字孪生系统" />
        <span>智能数字孪生监控系统</span>
      </div>
      <div class="user-panel">
        <div class="notification-icon">
          <svg viewBox="0 0 24 24" width="24" height="24">
            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
          </svg>
          <span class="notification-count">3</span>
        </div>
        <div class="user-avatar">
          <img src="/images/avatar.png" alt="用户头像" />
        </div>
      </div>
    </div> -->
    
    <div class="main-content">
      <!-- 左侧控制面板 -->
      <div class="control-panel">
        <div class="panel-header">
          <h3>系统控制</h3>
        </div>
        <div class="panel-body">
          <div class="control-group">
            <h4>模型选择</h4>
            <div class="model-selector">
              <div class="model-item" :class="{ active: selectedModel === 'building' }" @click="selectModel('building')">
      
                <span>智能建筑</span>
              </div>
              <div class="model-item" :class="{ active: selectedModel === 'factory' }" @click="selectModel('factory')">
         
                <span>智能制造</span>
              </div>
              <div class="model-item" :class="{ active: selectedModel === 'infrastructure' }" @click="selectModel('infrastructure')">
              
                <span>基础设施</span>
              </div>
            </div>
          </div>
          
          <div class="control-group">
            <h4>时间控制</h4>
            <div class="time-controls">
              <button class="time-btn" @click="setSimulationSpeed(0.5)">0.5x</button>
              <button class="time-btn active" @click="setSimulationSpeed(1)">1x</button>
              <button class="time-btn" @click="setSimulationSpeed(2)">2x</button>
              <button class="time-btn" @click="toggleRealTime">
                {{ isRealTime ? '切换到模拟时间' : '切换到实时' }}
              </button>
            </div>
          </div>
          
          <div class="control-group">
            <h4>视图控制</h4>
            <div class="view-controls">
              <button class="view-btn" @click="resetView">重置视图</button>
              <button class="view-btn" @click="toggleWireframe">{{ isWireframe ? '实心视图' : '线框视图' }}</button>
              <button class="view-btn" @click="toggleShadows">{{ isShadows ? '关闭阴影' : '开启阴影' }}</button>
            </div>
          </div>
          
          <div class="control-group">
            <h4>告警状态</h4>
            <div class="alert-status">
              <div class="alert-item critical">
                <div class="alert-icon">
                  <svg viewBox="0 0 24 24" width="20" height="20">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                  </svg>
                </div>
                <div class="alert-info">
                  <div class="alert-title">设备3离线</div>
                  <div class="alert-time">2分钟前</div>
                </div>
              </div>
              <div class="alert-item warning">
                <div class="alert-icon">
                  <svg viewBox="0 0 24 24" width="20" height="20">
                    <path d="M12 5.994L5.7 10.745l1.414 1.414L12 8.414l4.886 4.885L18.3 10.745z"/>
                  </svg>
                </div>
                <div class="alert-info">
                  <div class="alert-title">湿度超出阈值</div>
                  <div class="alert-time">5分钟前</div>
                </div>
              </div>
              <div class="alert-item info">
                <div class="alert-icon">
                  <svg viewBox="0 0 24 24" width="20" height="20">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
                  </svg>
                </div>
                <div class="alert-info">
                  <div class="alert-title">系统更新完成</div>
                  <div class="alert-time">30分钟前</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中间数字孪生视图区域 -->
      <div class="twin-viewer">
        <!-- 3D模型容器 -->
        <div class="model-container" ref="modelContainer">
          <!-- 数字孪生模型将通过Three.js或其他3D引擎渲染 -->
          <div class="model-placeholder">
            <img :src="modelImage" alt="数字孪生模型" />
            <div v-if="loadingModel" class="loading-indicator">
              <div class="spinner"></div>
              <span>加载模型中...</span>
            </div>
          </div>
          
          <!-- 信息叠加层 -->
          <div class="info-overlay" :class="{ visible: showOverlay }">
            <!-- 环境数据卡片 -->
            <div class="data-card environment-card">
              <h4>环境监测</h4>
              <div class="data-row">
                <div class="data-label">温度</div>
                <div class="data-value">{{ temperature }}°C</div>
                <div class="data-trend" :class="{ up: tempTrend > 0, down: tempTrend < 0 }">
                  <span v-if="tempTrend > 0">↑</span>
                  <span v-else-if="tempTrend < 0">↓</span>
                  <span>{{ Math.abs(tempTrend) }}%</span>
                </div>
              </div>
              <div class="data-row">
                <div class="data-label">湿度</div>
                <div class="data-value">{{ humidity }}%</div>
                <div class="data-trend" :class="{ up: humidityTrend > 0, down: humidityTrend < 0 }">
                  <span v-if="humidityTrend > 0">↑</span>
                  <span v-else-if="humidityTrend < 0">↓</span>
                  <span>{{ Math.abs(humidityTrend) }}%</span>
                </div>
              </div>
              <div class="data-row">
                <div class="data-label">压力</div>
                <div class="data-value">{{ pressure }}kPa</div>
                <div class="data-trend" :class="{ up: pressureTrend > 0, down: pressureTrend < 0 }">
                  <span v-if="pressureTrend > 0">↑</span>
                  <span v-else-if="pressureTrend < 0">↓</span>
                  <span>{{ Math.abs(pressureTrend) }}%</span>
                </div>
              </div>
              <div class="data-row">
                <div class="data-label">光照</div>
                <div class="data-value">{{ light }}lux</div>
                <div class="data-trend" :class="{ up: lightTrend > 0, down: lightTrend < 0 }">
                  <span v-if="lightTrend > 0">↑</span>
                  <span v-else-if="lightTrend < 0">↓</span>
                  <span>{{ Math.abs(lightTrend) }}%</span>
                </div>
              </div>
            </div>
            
            <!-- 设备状态卡片 -->
            <div class="data-card device-card">
              <h4>设备状态</h4>
              <div class="device-grid">
                <div class="device-item" :class="{ online: device.status === 'online', warning: device.status === 'warning', offline: device.status === 'offline' }" v-for="(device, index) in devices" :key="index">
                  <div class="device-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                      <path d="M20 6h-3V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2H4c-1.1 0-1.99.9-1.99 2L2 19c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 9H4v-6h11v6zm0-8H4V8h11v2zm6 8h-3v2h3v-2zm0-8h-3V8h3v2z"/>
                    </svg>
                  </div>
                  <div class="device-info">
                    <div class="device-name">{{ device.name }}</div>
                    <div class="device-status">{{ device.statusText }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧数据分析面板 -->
      <div class="analytics-panel">
        <div class="panel-header">
          <h3>实时数据分析</h3>
          <div class="panel-actions">
            <button class="panel-action-btn" @click="toggleAnalyticsView">
              <svg viewBox="0 0 24 24" width="18" height="18">
                <path d="M10 20h4V4h-4v16zm-6 2h16v-2H4v2z"/>
              </svg>
            </button>
          </div>
        </div>
        
        <div class="analytics-tabs">
          <div class="tab-header">
            <div :class="{ 'tab-btn': true, active: activeTab === 'history' }" @click="activeTab = 'history'">历史数据</div>
            <div :class="{ 'tab-btn': true, active: activeTab === 'forecast' }" @click="activeTab = 'forecast'">趋势预测</div>
            <div :class="{ 'tab-btn': true, active: activeTab === 'efficiency' }" @click="activeTab = 'efficiency'">效率分析</div>
          </div>
          
          <div class="tab-content">
            <div v-if="activeTab === 'history'" class="history-content">
              <div class="chart-container">
                <div ref="temperatureChart" class="chart"></div>
                <div ref="humidityChart" class="chart"></div>
              </div>
            </div>
            
            <div v-if="activeTab === 'forecast'" class="forecast-content">
              <div class="chart-container">
                <div ref="forecastChart" class="chart"></div>
              </div>
              <div class="forecast-metrics">
                <div class="metric-card">
                  <div class="metric-title">温度预测</div>
                  <div class="metric-value">{{ forecastTemp }}°C</div>
                  <div class="metric-period">未来24小时</div>
                </div>
                <div class="metric-card">
                  <div class="metric-title">湿度预测</div>
                  <div class="metric-value">{{ forecastHumidity }}%</div>
                  <div class="metric-period">未来24小时</div>
                </div>
              </div>
            </div>
            
            <div v-if="activeTab === 'efficiency'" class="efficiency-content">
              <div class="efficiency-metrics">
                <div class="efficiency-card">
                  <div class="efficiency-icon">
                    <svg viewBox="0 0 24 24" width="32" height="32">
                      <path d="M20 6h-3V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v2H4c-1.1 0-1.99.9-1.99 2L2 19c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 9H4v-6h11v6zm0-8H4V8h11v2zm6 8h-3v2h3v-2zm0-8h-3V8h3v2z"/>
                    </svg>
                  </div>
                  <div class="efficiency-data">
                    <div class="efficiency-title">设备利用率</div>
                    <div class="efficiency-value">{{ deviceUtilization }}%</div>
                    <div class="efficiency-change positive">
                      <span>↑</span> {{ utilizationChange }}% 从上周
                    </div>
                  </div>
                </div>
                
                <div class="efficiency-card">
                  <div class="efficiency-icon">
                    <svg viewBox="0 0 24 24" width="32" height="32">
                      <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
                    </svg>
                  </div>
                  <div class="efficiency-data">
                    <div class="efficiency-title">能源效率</div>
                    <div class="efficiency-value">{{ energyEfficiency }}%</div>
                    <div class="efficiency-change negative">
                      <span>↓</span> {{ energyChange }}% 从上周
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="efficiency-chart-container">
                <div ref="efficiencyChart" class="chart"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DigitalTwin',
  data() {
    return {
      selectedModel: 'building',
      modelImages: {
        building: '/images/digital-twin-building.jpg',
        factory: '/images/digital-twin-factory.jpg',
        infrastructure: '/images/digital-twin-infrastructure.jpg'
      },
      loadingModel: true,
      showOverlay: true,
      isWireframe: false,
      isShadows: true,
      isRealTime: true,
      simulationSpeed: 1,
      activeTab: 'history',
      
      temperature: 22.5,
      humidity: 65,
      pressure: 101.3,
      light: 520,
      tempTrend: 0.8,
      humidityTrend: -1.2,
      pressureTrend: 0.5,
      lightTrend: -0.3,
      
      devices: [
        { id: 1, name: '空调系统', status: 'online', statusText: '运行中' },
        { id: 2, name: '通风设备', status: 'warning', statusText: '性能下降' },
        { id: 3, name: '照明系统', status: 'offline', statusText: '离线' },
        { id: 4, name: '安全监控', status: 'online', statusText: '运行中' }
      ],
      
      forecastTemp: 23.2,
      forecastHumidity: 68,
      
      deviceUtilization: 87,
      utilizationChange: 5.2,
      energyEfficiency: 78,
      energyChange: 2.1,
      
      temperatureChart: null,
      humidityChart: null,
      forecastChart: null,
      efficiencyChart: null,
      
      sensorDataInterval: null
    };
  },
  
  computed: {
    modelImage() {
      return this.modelImages[this.selectedModel] || '/images/default-digital-twin.jpg';
    }
  },
  
  mounted() {
    this.initCharts();
    this.startSensorDataSimulation();
    this.loadingModel = false;
    
    // 添加窗口大小变化监听
    window.addEventListener('resize', this.handleResize);
  },
  
  beforeDestroy() {
    this.clearSensorDataSimulation();
    
    // 销毁图表实例
    if (this.temperatureChart) {
      this.temperatureChart.dispose();
    }
    if (this.humidityChart) {
      this.humidityChart.dispose();
    }
    if (this.forecastChart) {
      this.forecastChart.dispose();
    }
    if (this.efficiencyChart) {
      this.efficiencyChart.dispose();
    }
    
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.handleResize);
  },
  
  methods: {
    // 图表初始化
    initCharts() {
      // 温度图表
      this.temperatureChart = echarts.init(this.$refs.temperatureChart);
      const temperatureOption = {
        title: {
          text: '温度变化趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
          axisLine: {
            lineStyle: {
              color: '#4285f4'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '温度 (°C)',
          axisLine: {
            lineStyle: {
              color: '#4285f4'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(66, 133, 244, 0.1)'
            }
          }
        },
        series: [{
          name: '温度',
          type: 'line',
          smooth: true,
          data: [20.5, 21.2, 21.8, 22.5, 22.8, 23.0, 23.2, 23.0, 22.8, 22.5],
          lineStyle: {
            width: 3,
            color: '#4285f4'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(66, 133, 244, 0.4)'
              }, {
                offset: 1,
                color: 'rgba(66, 133, 244, 0.1)'
              }]
            }
          }
        }]
      };
      this.temperatureChart.setOption(temperatureOption);
      
      // 湿度图表
      this.humidityChart = echarts.init(this.$refs.humidityChart);
      const humidityOption = {
        title: {
          text: '湿度变化趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
          axisLine: {
            lineStyle: {
              color: '#34a853'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '湿度 (%)',
          axisLine: {
            lineStyle: {
              color: '#34a853'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(52, 168, 83, 0.1)'
            }
          }
        },
        series: [{
          name: '湿度',
          type: 'line',
          smooth: true,
          data: [68, 66, 65, 64, 63, 65, 67, 68, 69, 66],
          lineStyle: {
            width: 3,
            color: '#34a853'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(52, 168, 83, 0.4)'
              }, {
                offset: 1,
                color: 'rgba(52, 168, 83, 0.1)'
              }]
            }
          }
        }]
      };
      this.humidityChart.setOption(humidityOption);
      
      // 预测图表
      this.forecastChart = echarts.init(this.$refs.forecastChart);
      const forecastOption = {
        title: {
          text: '未来24小时预测',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度预测', '湿度预测'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['现在', '3小时后', '6小时后', '9小时后', '12小时后', '15小时后', '18小时后', '21小时后', '24小时后'],
          axisLine: {
            lineStyle: {
              color: '#888'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '温度 (°C)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#4285f4'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(66, 133, 244, 0.1)'
              }
            }
          },
          {
            type: 'value',
            name: '湿度 (%)',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#34a853'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '温度预测',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            data: [22.5, 22.8, 23.2, 23.5, 23.8, 24.0, 23.8, 23.5, 23.2],
            lineStyle: {
              width: 3,
              color: '#4285f4'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(66, 133, 244, 0.4)'
                }, {
                  offset: 1,
                  color: 'rgba(66, 133, 244, 0.1)'
                }]
              }
            }
          },
          {
            name: '湿度预测',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: [65, 64, 63, 62, 61, 60, 59, 58, 57],
            lineStyle: {
              width: 3,
              color: '#34a853'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(52, 168, 83, 0.4)'
                }, {
                  offset: 1,
                  color: 'rgba(52, 168, 83, 0.1)'
                }]
              }
            }
          }
        ]
      };
      this.forecastChart.setOption(forecastOption);
      
      // 效率图表
      this.efficiencyChart = echarts.init(this.$refs.efficiencyChart);
      const efficiencyOption = {
        title: {
          text: '设备效率分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['能源消耗', '设备利用率'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          top: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#888'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '能源消耗 (kWh)',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#ea4335'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(234, 67, 53, 0.1)'
              }
            }
          },
          {
            type: 'value',
            name: '利用率 (%)',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#fbbc05'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '能源消耗',
            type: 'bar',
            data: [152, 147, 155, 162, 175, 120, 85],
            itemStyle: {
              color: '#ea4335'
            }
          },
          {
            name: '设备利用率',
            type: 'line',
            yAxisIndex: 1,
            data: [85, 83, 87, 89, 92, 75, 60],
            lineStyle: {
              width: 3,
              color: '#fbbc05'
            },
            symbol: 'circle',
            symbolSize: 8
          }
        ]
      };
      this.efficiencyChart.setOption(efficiencyOption);
    },
    
    // 窗口大小变化处理
    handleResize() {
      if (this.temperatureChart) {
        this.temperatureChart.resize();
      }
      if (this.humidityChart) {
        this.humidityChart.resize();
      }
      if (this.forecastChart) {
        this.forecastChart.resize();
      }
      if (this.efficiencyChart) {
        this.efficiencyChart.resize();
      }
    },
    
    // 模拟传感器数据
    startSensorDataSimulation() {
      this.sensorDataInterval = setInterval(() => {
        // 模拟温度数据变化
        this.tempTrend = ((Math.random() * 2 - 1) * 2).toFixed(1);
        this.temperature = (parseFloat(this.temperature) + (Math.random() * 0.4 - 0.2)).toFixed(1);
        
        // 模拟湿度数据变化
        this.humidityTrend = ((Math.random() * 2 - 1) * 1.5).toFixed(1);
        this.humidity = Math.max(30, Math.min(90, parseFloat(this.humidity) + (Math.random() * 0.8 - 0.4))).toFixed(0);
        
        // 模拟压力数据变化
        this.pressureTrend = ((Math.random() * 2 - 1) * 0.8).toFixed(1);
        this.pressure = (parseFloat(this.pressure) + (Math.random() * 0.1 - 0.05)).toFixed(1);
        
        // 模拟光照数据变化
        this.lightTrend = ((Math.random() * 2 - 1) * 1.2).toFixed(1);
        this.light = Math.max(100, Math.min(1000, parseFloat(this.light) + (Math.random() * 20 - 10))).toFixed(0);
        
        // 随机更新设备状态
        if (Math.random() > 0.7) {
          const randomIndex = Math.floor(Math.random() * this.devices.length);
          if (this.devices[randomIndex].id !== 3) { // 不改变设备3的离线状态
            const statuses = ['online', 'warning', 'online'];
            const statusTexts = ['运行中', '性能下降', '运行中'];
            const newStatus = statuses[Math.floor(Math.random() * statuses.length)];
            this.devices[randomIndex].status = newStatus;
            this.devices[randomIndex].statusText = statusTexts[newStatus === 'online' ? 0 : 1];
          }
        }
      }, 3000);
    },
    
    // 清除传感器数据模拟
    clearSensorDataSimulation() {
      if (this.sensorDataInterval) {
        clearInterval(this.sensorDataInterval);
        this.sensorDataInterval = null;
      }
    },
    
    // 模型选择
    selectModel(modelType) {
      this.selectedModel = modelType;
      this.loadingModel = true;
      
      // 模拟模型加载延迟
      setTimeout(() => {
        this.loadingModel = false;
      }, 1500);
    },
    
    // 切换线框视图
    toggleWireframe() {
      this.isWireframe = !this.isWireframe;
    },
    
    // 切换阴影显示
    toggleShadows() {
      this.isShadows = !this.isShadows;
    },
    
    // 切换实时/模拟时间
    toggleRealTime() {
      this.isRealTime = !this.isRealTime;
      if (this.isRealTime) {
        this.setSimulationSpeed(1);
      }
    },
    
    // 设置模拟速度
    setSimulationSpeed(speed) {
      this.simulationSpeed = speed;
    },
    
    // 重置视图
    resetView() {
      // 在实际3D引擎中重置视图
      console.log('Resetting view');
    },
    
    // 切换分析视图
    toggleAnalyticsView() {
      // 切换分析面板视图
      console.log('Toggling analytics view');
    }
  }
};
</script>

<style scoped>
.digital-twin-container {
  font-family: 'Roboto', 'Noto Sans SC', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 36px;
  margin-right: 12px;
}

.logo span {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.user-panel {
  display: flex;
  align-items: center;
  gap: 20px;
}

.notification-icon {
  position: relative;
  cursor: pointer;
}

.notification-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ea4335;
  color: white;
  font-size: 12px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 主内容区域 */
.main-content {
  display: grid;
  grid-template-columns: 250px 1fr 350px;
  gap: 20px;
  padding: 20px;
  max-width: 1800px;
  margin: 0 auto;
}

/* 左侧控制面板 */
.control-panel {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 104px);
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.panel-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.control-group {
  margin-bottom: 24px;
}

.control-group h4 {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  margin-bottom: 12px;
}

/* 模型选择器 */
.model-selector {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.model-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s;
}

.model-item:hover {
  background-color: #eef1f5;
}

.model-item.active {
  background-color: #e8f0fe;
  border: 1px solid #4285f4;
}

.model-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
}

.model-item span {
  font-size: 14px;
  color: #333;
}

/* 时间控制 */
.time-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.time-btn {
  padding: 8px 12px;
  font-size: 13px;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.time-btn:hover {
  background-color: #eef1f5;
}

.time-btn.active {
  background-color: #4285f4;
  color: white;
  border-color: #4285f4;
}

/* 视图控制 */
.view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.view-btn {
  padding: 8px 12px;
  font-size: 13px;
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn:hover {
  background-color: #eef1f5;
}

/* 告警状态 */
.alert-status {
  max-height: 200px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.alert-item:hover {
  transform: translateX(4px);
}

.alert-item.critical {
  background-color: #ffebee;
  border-left: 3px solid #ea4335;
}

.alert-item.warning {
  background-color: #fff8e1;
  border-left: 3px solid #fbbc05;
}

.alert-item.info {
  background-color: #e8f5e9;
  border-left: 3px solid #34a853;
}

.alert-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 12px;
}

.alert-item.critical .alert-icon {
  background-color: #ffcdd2;
  color: #ea4335;
}

.alert-item.warning .alert-icon {
  background-color: #fff3e0;
  color: #fbbc05;
}

.alert-item.info .alert-icon {
  background-color: #c8e6c9;
  color: #34a853;
}

.alert-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.alert-time {
  font-size: 12px;
  color: #777;
}

/* 中间数字孪生视图区域 */
.twin-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.model-container {
  position: relative;
  height: calc(100% - 40px);
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.model-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  position: relative;
}

.model-placeholder img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.loading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(66, 133, 244, 0.3);
  border-radius: 50%;
  border-top-color: #4285f4;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 信息叠加层 */
.info-overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 320px;
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.3s ease;
  z-index: 5;
}

.info-overlay.visible {
  opacity: 1;
  transform: translateX(0);
}

.data-card {
  margin-bottom: 20px;
}

.data-card h4 {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.data-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.data-label {
  width: 80px;
  font-size: 13px;
  color: #666;
}

.data-value {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 10px;
}

.data-trend {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.data-trend.up {
  background-color: #e8f5e9;
  color: #34a853;
}

.data-trend.down {
  background-color: #ffebee;
  color: #ea4335;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.device-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  transition: all 0.2s;
}

.device-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.device-item.online {
  background-color: #e8f5e9;
  border: 1px solid #c8e6c9;
}

.device-item.warning {
  background-color: #fff8e1;
  border: 1px solid #ffecb3;
}

.device-item.offline {
  background-color: #ffebee;
  border: 1px solid #ffcdd2;
}

.device-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
}

.device-item.online .device-icon {
  background-color: #c8e6c9;
  color: #34a853;
}

.device-item.warning .device-icon {
  background-color: #ffecb3;
  color: #fbbc05;
}

.device-item.offline .device-icon {
  background-color: #ffcdd2;
  color: #ea4335;
}

.device-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.device-status {
  font-size: 12px;
  color: #666;
}

/* 右侧数据分析面板 */
.analytics-panel {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 104px);
}

.panel-actions {
  display: flex;
  gap: 10px;
}

.panel-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f8f9fa;
  border: none;
  color: #555;
  cursor: pointer;
  transition: all 0.2s;
}

.panel-action-btn:hover {
  background-color: #eef1f5;
}

/* 分析标签页 */
.analytics-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tab-header {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.tab-btn {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.2s;
}

.tab-btn.active {
  color: #4285f4;
  border-bottom: 2px solid #4285f4;
}

.tab-content {
  padding: 20px;
  overflow-y: auto;
}

/* 历史数据内容 */
.chart-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart {
  height: 200px;
  background-color: #f9fafc;
  border-radius: 8px;
}

/* 预测内容 */
.forecast-content {
  display: flex;
  flex-direction: column;
}

.forecast-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.metric-card {
  background-color: #f9fafc;
  border-radius: 8px;
  padding: 16px;
}

.metric-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 4px;
}

.metric-period {
  font-size: 12px;
  color: #999;
}

/* 效率分析内容 */
.efficiency-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.efficiency-card {
  display: flex;
  align-items: center;
  background-color: #f9fafc;
  border-radius: 8px;
  padding: 16px;
}

.efficiency-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 16px;
  background-color: #e8f0fe;
  color: #4285f4;
}

.efficiency-data {
  flex: 1;
}

.efficiency-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.efficiency-value {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 4px;
}

.efficiency-change {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.efficiency-change.positive {
  color: #34a853;
}

.efficiency-change.negative {
  color: #ea4335;
}

.efficiency-change span {
  margin-right: 4px;
}

.efficiency-chart-container {
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .main-content {
    grid-template-columns: 200px 1fr 300px;
  }
}

@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 180px 1fr;
  }
  
  .analytics-panel {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .control-panel {
    height: auto;
    margin-bottom: 20px;
  }
  
  .analytics-panel {
    display: block;
    height: auto;
    margin-top: 20px;
  }
}
</style>
<!-- <template>
  <div class="model-viewer">
    <div ref="modelContainer" class="model-container"></div>
    
    <div v-if="loading" class="loading-overlay">
      <div class="spinner">
        <div class="spinner-content">加载中...</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

export default {
  name: 'GlbModelViewer',
  setup() {
    const modelContainer = ref(null);
    const loading = ref(true);
    const scene = ref(null);
    const camera = ref(null);
    const renderer = ref(null);
    const controls = ref(null);
    const model = ref(null);

    let animationMixer = null;
    let clock = null;

    // 定义模型文件的路径
    const modelUrl = 'model/测试(7).glb'; // 替换为你的模型文件路径

    const initScene = () => {
      // 创建场景
      scene.value = new THREE.Scene();
      scene.value.background = new THREE.Color(0xf0f0f0);

      // 创建相机
      camera.value = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.value.position.z = 5;

      // 创建渲染器
      renderer.value = new THREE.WebGLRenderer({ antialias: true });
      renderer.value.setSize(window.innerWidth, window.innerHeight);
      renderer.value.setPixelRatio(window.devicePixelRatio);
      modelContainer.value.appendChild(renderer.value.domElement);

      // 添加轨道控制器
      controls.value = new OrbitControls(camera.value, renderer.value.domElement);
      controls.value.enableDamping = true;
      controls.value.dampingFactor = 0.05;
      controls.value.target.set(0, 0, 0);

      // 添加灯光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.value.add(ambientLight);

      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(1, 1, 1);
      scene.value.add(directionalLight);

      // 加载GLB模型
      const loader = new GLTFLoader();
      loader.load(
        modelUrl, // 使用定义的模型文件路径
        (gltf) => {
          model.value = gltf.scene;
          scene.value.add(model.value);
          
          // 如果模型有动画
          if (gltf.animations && gltf.animations.length > 0) {
            clock = new THREE.Clock();
            animationMixer = new THREE.AnimationMixer(model.value);
            gltf.animations.forEach(clip => {
              animationMixer.clipAction(clip).play();
            });
          }

          // 调整相机和控制器
          const boundingBox = new THREE.Box3().setFromObject(model.value);
          const boxSize = boundingBox.getSize(new THREE.Vector3());
          const boxCenter = boundingBox.getCenter(new THREE.Vector3());
          
          camera.value.position.x = boxSize.x * 2;
          camera.value.position.y = boxSize.y * 2;
          camera.value.position.z = boxSize.z * 2;
          camera.value.lookAt(boxCenter);

          controls.value.target.copy(boxCenter);
          controls.value.update();
          
          loading.value = false;
        },
        undefined,
        (error) => {
          console.error('加载GLB模型出错:', error);
          loading.value = false;
        }
      );

      // 开始渲染循环
      animate();
    };

    const animate = () => {
      requestAnimationFrame(animate);
      
      // 更新动画
      if (animationMixer && clock) {
        animationMixer.update(clock.getDelta());
      }
      
      controls.value.update();
      renderer.value.render(scene.value, camera.value);
    };

    const handleResize = () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      
      renderer.value.setSize(width, height);
      camera.value.aspect = width / height;
      camera.value.updateProjectionMatrix();
    };

    onMounted(() => {
      // 初始化场景
      initScene();
      
      // 添加窗口大小调整监听器
      window.addEventListener('resize', handleResize);
      
      // 添加鼠标滚轮缩放控制
      const mouseWheel = (event) => {
        event.preventDefault();
        const delta = event.deltaY > 0 ? 1 : -1;
        controls.value.dollyOut(delta);
        controls.value.update();
      };
      renderer.value.domElement.addEventListener('wheel', mouseWheel);
    });

    onUnmounted(() => {
      // 移除事件监听器
      window.removeEventListener('resize', handleResize);
      renderer.value.domElement.removeEventListener('wheel', mouseWheel);
      
      // 清理渲染器和资源
      renderer.value.dispose();
      scene.value = null;
      camera.value = null;
      controls.value.dispose();
    });

    return {
      modelContainer,
      loading
    };
  }
};
</script>

<style scoped>
.model-viewer {
  position: relative;
  width: 100%;
  height: 100%;
}

.model-container {
  width: 100%;
  height: 100%;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top: 5px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-content {
  font-size: 14px;
  color: white;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> -->
